<template>
  <div class="face-wrapper">
    <my-tabs :tab-list="tabList"></my-tabs>
    <el-form ref="infoForm" label-width="80px">
      <el-form-item label="当前状态">
        <div class="state font-color-gray">
          {{ `${faceStatus === 1 ? '已' : '未'}认证` }}
        </div>
      </el-form-item>
      <el-form-item label="人脸数据">
        <el-image
          :src="require('@/assets/images/public/face_data_placehoder.png')"
          v-if="faceStatus === 1"
        ></el-image>
        <div class="face-data" v-else>
          <el-image
            :src="require('@/assets/images/public/face_data_placehoder.png')"
            @click="handleFace()"
          ></el-image>
          <div class="desc font-color-gray">
            注意事项：保证光线充足、勿遮挡面部
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="faceStatus === 1">
        <el-button type="primary" size="small" @click="handleRemove()">解除绑定</el-button>
      </el-form-item>
    </el-form>
    <!-- 人脸绑定 -->
    <FaceBinding
      v-if="visible"
      :visible.sync="visible"
      :status="bangidign"
      @click="init"
    ></FaceBinding>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import FaceBinding from './components/faceBinding.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    MyTabs,
    FaceBinding
  },
  data() {
    return {
      tabList: [
        {
          title: '人脸认证'
        }
      ],
      visible: false,
      bangidign: 0
    }
  },
  computed: {
    ...mapGetters({
      faceStatus: 'projectSetting/getGlobFaceStatus'
    })
  },
  methods: {
    // 绑定人脸
    handleFace() {
      this.visible = true
      this.bangidign = 1
    },
    // 解除绑定
    handleRemove() {
      this.visible = true
      this.bangidign = 0
    },
    init() {
      this.$store.dispatch('user/userInfo')
      if (this.bangidign && this.$route.query.back) {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.face-wrapper {
  .font-color-gray {
    font-weight: 400;
    color: $text-color-auxiliary;
  }
  .state {
    font-size: 13px;
  }
  .face-data {
    .el-image {
      cursor: pointer;
    }
    .desc {
      font-size: 12px;
    }
  }
}
</style>
